<template>
    <div class="typetab" :style="{width:typetabstyle.width,left:typetabstyle.left}">
        <ul>
            <li :class="typetabstyle.activeName=='map'?'active':''" @click="changetypetab('map')">地图</li>
            <li :class="typetabstyle.activeName=='tongjitu'?'active':''" @click="changetypetab('tongjitu')">统计图</li>
            <li :class="typetabstyle.activeName=='table'?'active':''" @click="changetypetab('table')">表格</li>
        </ul>
    </div>
</template>

<script>
  import { mapState, mapMutations } from "vuex";

  export default {
    name: "typetab",
    props: ["typetabstyle"],
    components: {
      
    },
    data() {
      return {
          // activeName:"tongjitu"
      };
    },
    computed: {
      ...mapState({
        showTypeTabLayer:state => state.micro.showTypeTabLayer,
        showFastCollectLayer: state => state.micro.showFastCollectLayer,
        showTableLayer:state => state.micro.showTableLayer,
        showQueryTableLayer: state => state.micro.showQueryTableLayer,
        showQueryTableLayer: state => state.micro.showQueryTableLayer
      })
    },
    watch: {
      typetabstyle:{
        handler(newVal, oldVal){
          this.typetabstyle = newVal;
        },
        deep: true
      }
    },
    mounted() {
      
    },
    beforeDestroy() {

    },
    methods: {
      ...mapMutations(["changeShowFastCollectLayer","changeShowTypeTabLayer","changeShowTableLayer","changeShowQueryTableLayer","changeShowQueryTableLayer"]),
      changetypetab(type){
          this.typetabstyle.activeName = type;
          switch(type){
            case "map":
              this.$store.commit("changeShowFastCollectLayer", false);
              this.$store.commit("changeShowTypeTabLayer", false);
              this.$store.commit("changeShowQueryTableLayer", false);
              this.$store.commit("changeShowTableLayer", false);
              break;
            case "tongjitu":
              this.$store.commit("changeShowTypeTabLayer", true);
              this.$store.commit("changeShowFastCollectLayer", true);
              this.$store.commit("changeShowQueryTableLayer", false);
              this.$store.commit("changeShowTableLayer", false);
              this.typetabstyle.width = 'calc(100vw - 301px)';
              this.typetabstyle.left = '301px';
              break;
            case "table":
              this.$store.commit("changeShowTableLayer", true);
              this.$store.commit("changeShowTypeTabLayer", true);
              this.$store.commit("changeShowQueryTableLayer", false);
              this.$store.commit("changeShowFastCollectLayer", false);
              this.typetabstyle.width = '100vw';
              this.typetabstyle.left = '0';
              break;
            default:
              break;
          }
      }

    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../css/rule.scss";
    .typetab{
        z-index: 1200;
        position: absolute;
        top: 0;
        background:rgba(12,71,100,1);
        top: 0;
        right: 0;
        width: calc(100vw - 301px);
        top: 0;
        left: 301px;
        height: 40px;
        ul{
            float: right;
            margin-right: 20px;
            li{
                list-style: none;
                float: left;
                color: $fontColorW;
                margin-left: 19px;
                font-size: $fontSize;
                line-height: 40px;
                cursor: pointer;
                padding: 0 10px;
            }
            li.active{
                background: rgba(16,112,137,0.5);
            }
        }
    }


</style>
<style rel="stylesheet/scss" lang="scss">
  @import "../css/rule.scss";

</style>
